<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
table{
	border-collapse: collapse;
    border:1px solid #000;
    width: 600px;
    text-align: center;
    margin:0 auto;

}

.odd{
    background-color: pink;
}
tbody tr:hover{
    background-color: #3399ff;
    color: #fff;
}
.tablehead{
    background-color:pink;
    color: #fff;
}
.shade{
    width: 100%;
    min-height: 900px;
    position: absolute;
    top: 0;
    left: 0;
    background:rgba(153,153,153,0.5);

}
.form-panel{
    width: 400px;
    background-color: #fff;
    margin:200px auto;
     position: relative;
}
.form-inner{
    padding: 20px;
}
.form-inner input{
    width: 100%;
    margin:20px auto;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    border:1px solid #ccc;
   

}
.options{
    width: 100px;
    margin:0 auto;
}
.form-header{
    background-color: pink;
    color: #fff;
    text-align: center;
    height: 40px;
    line-height: 40px;
   

}
.cha{
  width: 40px;
  height: 40px;
  background-image: url(assets/images/关闭.png);
  background-size: 35px 35px;
  background-repeat: no-repeat;
  position: absolute;
  right: 0px;
  top: 4px;
}
</style>
</head>
<body>
    <table border="1">
        <thead>
        <tr class="tablehead">
            <th colspan="5" >
            <h2> 采购清单</h2>
            </th>
        </tr>
         <tr>
             <th>序号</th>
             <th>商品名称</th>
             <th>单价</th>
             <th>数量</th>
             <th>操作</th>
         </tr>          
        </thead>
    <tbody>

        <tr>
             <td>1</t>
             <td>课本</td>
             <td>2.5</td>
             <td>5</td>
             <td>
             <button class="shanchu">删除</button>
             <button class="tianjia">添加</button>

             </td>
         </tr>
            <tr>
             <td>2</td>
             <td>羽毛球</td>
             <td>1.5</td>
             <td>15</td>
             <td>
            <button class="shanchu">删除</button>
             <button class="tianjia">添加</button>
             </td>
         </tr>
             <tr>
             <td>3</td>
             <td>乒乓球</td>
             <td>1</td>
             <td>5</td>
             <td>
             <button class="shanchu">删除</button>
                 <button class="tianjia">添加</button>
             </td>
         </tr>
             <tr>
             <td>4</td>
             <td>篮球</td>
             <td>15</td>
             <td>10</td>
             <td>
             <button class="shanchu">删除</button>
                  <button class="tianjia">添加</button>
             </td>
         </tr>
        <tr>
          <td  colspan="5">
              <p id="total">总计</p>
          </td>
        </tr>
    </tbody>
    </table>
    <div class="shade" style="display:none;">
     <div class="form-panel">
        <h5 class="form-header">请输入表单信息</h5>
            <div class="form-inner">
                 <input  name="goods" type="text" value="" placeholder="请输入商品名称"><br>
                 <input  name="price" type="text" value="" placeholder="请输入商品单价"><br>
                 <input  name="num" type="text" value="" placeholder="请输入商品数量"><br>
              <div class="options">
               <button class="queding">确定</button>
               <button class="quxiao">取消</button> 
               <div class="cha">
                  <em></em>
            </div>
            </div>
            </div>
            </div>
    </div>
   
</body>
<script type="text/javascript" src="assets/js/jquery3.js"></script>
<script type="text/javascript">
function Tal(){     //定义tal这个函数
     var Total=0;//定义一个变量让他等于0
    for (var i = 0; i < $('tbody tr').length-1; i++) {  //使用一个for循环当商品删除时序号跟着减
      var Pre=$("tbody tr:eq("+i+")").find('td').eq(2).text();//找到商品名称存储到pre中
      var Num=$("tbody tr:eq("+i+")").find('td').eq(3).text();
      //找到单价存储到num中
     Total+=Pre*Num;
     //在原有的基础上加上价格乘以数量
     $('#total').text("总计："+Total) //找到total里面的内容改为总计加Total值
  }
}
   
   $('tbody tr:odd').addClass('odd');               //给tbody中的奇数行tr添加样式odd
 
   $('body').on('click','.tianjia',function(){ //给body里面所有的tianjia绑定一个单机事件
    $(".shade").show();//让遮罩层显示

   });
   $(".cha").click(function(){ // 给cha绑定一个单机事件
     $(".shade").hide();//让遮罩层隐藏
   });
   $(".quxiao").click(function(){//给quxiao绑定一个单机事件
    $(".shade").hide();//让遮罩层隐藏
   });
   $(".queding").click(function(){ //给queding绑定一个单机事件
     var ogoods=$('input[name=goods]').val();
     var oprice=$('input[name=price]').val();
     var onum=$('input[name=num]').val();
     //抓住input里面的值

    $('input[name=goods]').val('');
    $('input[name=price]').val('');
    $('input[name=num]').val('');
    //清除input里面的内容
    var x=parseInt($('tbody tr:eq(-2)').find('td').eq(0).html())+1;
    // 把tbody里面倒数第二个tr里面的第1个td里面的内容加1（序号加一）
    var btnsStr='<button class="shanchu">删除</button>   <button class="tianjia">添加</button>'//将删除和添加按键储存在btnsstr里面
    var zfc="<tr><td>"+x+"</td><td>"+ogoods+"</td><td>"+oprice+"</td><td>"+onum+"</td><td>"+btnsStr+"</td></tr>";//添加新的tr的所有td的东西放在zfc里面
    $('tbody tr:eq(-2)').after(zfc);//在tbody里面的倒数第二个tr之后添加新的tr
     $('tbody tr:odd').addClass('odd');//给tbody里面奇数tr的样式改为odd的样式
     Tal()//调用tal
    $('.shade').hide();//让遮罩层隐藏
   });
   $("body").on("click",".shanchu",function(){//为body里面所有的shanchu添加一个单机事件
    $(this).parent().parent().remove();//点击这个删除让删除的父级元素td的父级元素tr整个删除
    for (var i = 0; i < $('tbody tr').length-1; i++) {//用for循环当商品添加时序号跟着加
       $("tbody tr:eq("+i+")").find('td').eq(0).text(i+1);
       Tal();
    }
   });
  Tal()

    


</script>
</html>